<!--  -->
<template>
  <div class="page_body">
    <div class="home_top">
      <img
        class="home_top_back"
        src="../../assets/image/black_icon01.png"
        alt="返回"
        @click="toBackFn()"
      />
      <!-- -->
      <div class="home_top_title">{{ topTitle }}</div>
    </div>
    <div class="xgspq">
      <!-- <div id="dplayer"></div> -->
      <div id="mse">
        <Video
          :url="course_video.videoUrl"
          :id="course_video.id"
          :last-play-time="course_video.videoLastplayTime"
        />
        <live
          :last-play-time="course_video.videoLastplayTime"
          :url="course_video.videoUrl"
          :id="course_video.id"
          @onPlay="playvideo"
          @onPause="pausevideo"
          @onEnded="endplaying"
        />
        <!-- <Audio :id="course_video.id" :width="750" :height="420" /> -->
        <!-- :audioArr="course_video.videoUrl" -->
      </div>
      <div class="page_biaoti">
        <div class="page_biaoti_h">{{ course_video.title }}</div>
        <div class="page_biaoti_p">时长: {{ course_video.video_duration }}</div>
      </div>
      <div class="page_centenloin">
        <van-tabs v-model="selected">
          <van-tab title="课程大纲">
            <div>
              <div
                class="schedule"
                v-html="course_video.detail_one"
                style="padding: 0.3rem"
              ></div>
            </div>
          </van-tab>
          <van-tab title="主讲人">
            <div>
              <div
                class="schedules"
                v-html="course_video.detail_two"
                style="padding: 0.3rem"
              ></div>
            </div>
          </van-tab>
          <van-tab title="PPT">
            <div>
              <div
                class="schedule"
                v-html="course_video.detail_three"
                style="padding: 0.3rem"
              ></div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>


<script>
import HomeTop from "@/components/homeTop.vue";
// import Audio from "../../components/XgPlayer/audio.vue";
import Live from "../../components/XgPlayer/live.vue";
import Video from "../../components/XgPlayer/video.vue";
import { Toast } from "mint-ui";
import { Tab, Tabs } from "vant";
export default {
  name: "",
  components: {
    HomeTop,
    Audio,
    Live,
    Video,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  data() {
    return {
      topTitle: "",
      selected: "1",
      player: null,
      course_video: {
        videoUrl: "",
        id: 0,
        video_duration: "",
        videoLastplayTime: 0, //观看时长
        title: "",
        detail_one: "",
        detail_two: "",
        detail_three: "",

        date: "",
      },
      timer: "",
    };
  },

  mounted() {
    this.topTitle = this.$route.query.topTitle;
    this.videoDetail();
    // this.dp = new DPlayer({
    //   container: document.getElementById("dplayer"), //播放器容器
    //   mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
    //   theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
    //   loop: false, // 是否自动循环
    //   lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
    //   // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
    //   hotkey: true, // 是否支持热键，调节音量，播放，暂停等
    //   preload: "auto", // 自动预加载
    //   volume: 0.7, // 初始化音量
    //   playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义
    //   logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左角上打一个logo
    //   video: {
    //     url: "https://media.w3.org/2010/05/sintel/trailer.mp4", // 播放视频的路径
    //   },
    // });
  },
  methods: {
    videoDetail() {
      let url = "/mobile/videoDetail";
      let data = {
        video_id: this.$route.query.id,
      };
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.course_video.videoUrl = res.course_video.video_url;
            this.course_video.id = res.course_video.id;
            // Number(this.course_video.id);
            this.course_video.videoLastplayTime = parseInt(
              res.course_video.study_duration
            );
            let time = res.course_video.video_duration;
            let ms = time * 1000;
            console.log(time * 1000);
            let date = new Date(ms);

            // 注意这里是使用的getUTCHours()方法，转换成UTC(协调世界时)时间的小时
            let hour = date.getUTCHours();
            // let hour = date.getHours(); 如果直接使用getHours()方法，则得到的时分秒格式会多出来8个小时（在国内开发基本都是使用的是东八区时间），getHours()方法会把当前的时区给加上。
            let minute = date.getMinutes();
            let second = date.getSeconds();

            let formatTime = `${hour.toString().padStart(2, "0")}:${minute
              .toString()
              .padStart(2, "0")}:${second.toString().padStart(2, "0")}`;
            console.log(formatTime);
            let hh = Number(hour * 3600) + Number(minute * 60) + Number(second);
            console.log(hh);
            this.course_video.video_duration = formatTime;
            this.course_video.title = res.course_video.title;
            this.course_video.detail_one = res.course_video.detail_one;
            this.course_video.detail_two = res.course_video.detail_two;
            this.course_video.detail_three = res.course_video.detail_three;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    playvideo(obj) {
      console.log("点击了播放,视频时长------" + obj.player.duration);
      this.timer = setInterval(() => {
        console.log("currentTime", obj);
        this.term(obj.player.currentTime);

      }, 5000);
    },
    pausevideo(obj) {
      console.log("点击了暂停，当前播放" + obj.player.currentTime);
      this.course_video.videoLastplayTime = obj.player.currentTime;
      clearInterval(this.timer); // 清除定时器
    },
    toBackFn() {
      this.$router.go(-1);
      // this.term();
    },
    //播放结束
    endplaying() {
      console.log("视频播放完成");
      clearInterval(this.timer); // 清除定时器
    },
    //保存接口
    term(time) {
      let url = "/mobile/updateStudyDuration";
      let data = {
        video_id: this.course_video.id,
        duration: time,
      };
      this.axios
        .post(url, data)
        .then((res) => {
          if (res.code == 0) {
            console.log(res, "222");
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },

  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  },
};
</script>

<style>
.page_body {
  width: 100vw;
  height: 100vh;
}
/* .xgspq {
  position: fixed;
  z-index: 999;
  top: 5%;
} */

.page_biaoti {
  height: 1.45rem;
  background-color: #fff;
}
.page_biaoti_h {
  margin-left: 0.3rem;
  height: 0.28rem;
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  line-height: 0.9rem;
}
.page_biaoti_p {
  margin-left: 0.3rem;
  height: 0.28rem;
  font-size: 0.28rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 1.45rem;
}
.page_centenloin {
  margin-top: 0.31rem;
  background-color: #fff;
  padding: 3% 0;
}

.xgplayer-progress-outer {
  display: none;
}
.abouthead {
  position: fixed;
  z-index: 999;
  margin-top: 10%;
}
#mse {
  margin-top: 10%;
  width: 7.5rem !important;
  height: 4.2rem !important;
}
.xgplayer-skin-default {
  width: 7.5rem !important;
  height: 4.2rem !important;
}
/* .xgplayer-skin-default video {
  width: 7.5rem !important;
  height: 4.2rem !important;
  background-color: #fff !important;
} */
.xgplayer-skin-default .xgplayer-progress {
  display: none;
}
.schedule {
  width: 7rem;
  overflow-x: auto;
}

.schedule p img {
  width: 7rem;
}
.schedules p img {
  width: 7rem;
}
.schedule table {
  width: 7rem;
}
</style>
